<template>
  <div style="width: 100%; height: 100%; position: relative">
    <div
      v-if="topNameFlag"
      style="
        display: flex;
        flex-direction: row;
        position: absolute;
        font-weight: bold;
        width: 100%;
      "
      :style="{
        top: topNameConfig.top,
        left: topNameConfig.left,
        right: topNameConfig.right,
        bottom: topNameConfig.bottom,
      }"
    >
      <div
        :style="{
          fontSize: topNameConfig.fontSize ? topNameConfig.fontSize : '18px',
          color: topNameConfig.color ? topNameConfig.color : '#ffffff',
        }"
        class="top_title"
      >
        <div class="topCname">{{ topNameConfig.name }}</div>
      </div>
    </div>
    <div style="width: 100%; height: 100%" ref="ech"></div>
  </div>
</template>
<script>
// 应用echarts主题
// import "echarts/theme/macarons.js";
import * as echarts from "echarts";
import { DUColor } from "../../assets/json/colors.js";
export default {
  title: "roundBar",
  data() {
    return {
      Echarts: null,
      title: "",
      value: 0,
      name: ["综合通过能力", "集装箱通过能力", "港口通过能力"],
      yname: ["沿海港口", "沿江港口", "内河港口"],
      seriesData: [],
      colors: [],
      gridData: {
        XYColor: "#fff",
        top: 40,
        right: 10,
        left: 10,
        bottom: 10,
        fontSize: 13,
        rotate: 0,
        lname: "",
        Rname: "",
        legendWidth: "auto",
        legendHeight: "auto",
        legendTop: "auto",
        legendLeft: "center",
        legendRight: "auto",
        legendBottom: "auto",
        legendOrient: "horizontal",
        legendColor: "#fff",
      },
      titleConfig: {
        text: "",
        textStyle: { color: "#fff" },
        left: "auto",
        top: "auto",
        right: "auto",
        bottom: "auto",
      },
      // topNameConfig: {
      //   name: "",
      //   fontSize: "",
      //   color: "",
      //   top: "",
      //   left: "40%",
      //   right: "",
      //   bottom: "",
      // },
    };
  },
  props: {
    topVal: { type: String || Number, default: "30" },
    lineFlag: { type: String || Number, default: "10" },
    topNameFlag: { type: Boolean, default: false },
    topNameConfig: {
      type: Object,
      default: () => ({
        name: "1111",
        fontSize: "",
        color: "",
        top: "",
        left: "0%",
        right: "",
        bottom: "",
      }),
    },
  },
  mounted() {
    var that = this;
    this.$nextTick(() => {
      this.Echarts = echarts.init(this.$refs.ech, "macarons");
      window.addEventListener("resize", () => {
        //重置容器高宽

        this.Echarts.resize();
      });
    });
  },
  created() {},
  methods: {
    getRadomData(arryLength) {
      var arry = [];
      for (var i = 0; i < arryLength; i++) {
        arry.push(100 + Math.round(Math.random() * 300));
      }
      return arry;
    },
    drawEchart() {
      // 绘制左侧面
      const CubeLeft = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          const xAxisPoint = shape.xAxisPoint;
          const c0 = [shape.x, shape.y];
          const c1 = [shape.x - offsetX, shape.y - offsetY];
          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
          const c3 = [xAxisPoint[0], xAxisPoint[1]];
          ctx
            .moveTo(c0[0], c0[1])
            .lineTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .closePath();
        },
      });
      // 绘制右侧面
      const CubeRight = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          const xAxisPoint = shape.xAxisPoint;
          const c1 = [shape.x, shape.y];
          const c2 = [xAxisPoint[0], xAxisPoint[1]];
          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
          const c4 = [shape.x + offsetX, shape.y - offsetY];
          ctx
            .moveTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .lineTo(c4[0], c4[1])
            .closePath();
        },
      });
      // 绘制顶面
      const CubeTop = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          const c1 = [shape.x, shape.y];
          const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
          const c3 = [shape.x, shape.y - offsetX];
          const c4 = [shape.x - offsetX, shape.y - offsetY];
          ctx
            .moveTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .lineTo(c4[0], c4[1])
            .closePath();
        },
      });
      // 注册三个面图形
      echarts.graphic.registerShape("CubeLeft", CubeLeft);
      echarts.graphic.registerShape("CubeRight", CubeRight);
      echarts.graphic.registerShape("CubeTop", CubeTop);
      const offsetX = 8;
      const offsetY = 4;
      if (!this.Echarts) {
        this.Echarts = echarts.init(this.$refs.ech, "macarons");
      }
      let flag = false;
      let names = this.seriesData.map((item) => item["type"]);
      let nameSet = new Set(names);
      if (nameSet.size > 1) {
        flag = true;
      }
      let seriesData = [
        // 柱体
        {
          name: "",
          type: "custom",
          stack: "Ad",
          renderItem: (params, api) => {
            const location = api.coord([api.value(0), api.value(1)]);
            return {
              type: "group",
              x: -10,
              children: [
                {
                  type: "CubeLeft",
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    xAxisPoint: api.coord([api.value(0), 0]),
                  },
                  style: {
                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: "rgba(2, 93, 196, 1)",
                      },
                      {
                        offset: 1,
                        color: "rgba(0, 155, 217, 1)",
                      },
                    ]),
                  },
                },
                {
                  type: "CubeRight",
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    xAxisPoint: api.coord([api.value(0), 0]),
                  },
                  style: {
                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: "rgba(2, 93, 196, 1)",
                      },
                      {
                        offset: 1,
                        color: "rgba(115, 246, 255, 1)",
                      },
                    ]),
                  },
                },
                {
                  type: "CubeTop",
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    xAxisPoint: api.coord([api.value(0), 0]),
                  },
                  style: {
                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: "rgba(28, 240, 255, 1)",
                      },
                      {
                        offset: 1,
                        color: "rgba(201, 251, 255, 1)",
                      },
                    ]),
                  },
                },
              ],
            };
          },
          data: dataV,
        },
      ];
      var option = {
        backgroundColor: "transparent",
        color: this.colors.legend > 0 ? this.colors : DUColor,
        title: this.titleConfig,
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(128, 128, 128, 0.8)",
          textStyle: { color: "#fff" },
          // axisPointer: {
          //   type: "cross",
          // },
          formatter: (params) => {
            if (params.length > 1) {
              let dataStr = `<div><div style="font-weight:bold;">${params[0].name}</div></div>`;
              params.forEach((item) => {
                dataStr += `<div>
                      <div style="margin: 0 8px;">
                        <span style="display:inline-block;margin-right:5px;width:10px;height:10px;border-radius: 50%;background-color:${
                          typeof item.color == "string"
                            ? item.color
                            : item.color.colorStops[0].color
                        };"></span>
                        <span>${item.seriesName}</span>
                        <span style="float:right;color:#ffffff;margin-left:20px;">${
                          item.value
                        }${
                  item.data && item.data.unit ? item.data.unit : ""
                }</span>
                      </div>
                    </div>`;
              });
              return dataStr;
            } else {
              let dataStr = `<div><div style="font-weight:bold;"><span style="display:inline-block;margin-right:5px;width:10px;height:10px;border-radius: 50%;background-color:${
                typeof params[0].color == "string"
                  ? params[0].color
                  : params[0].color.colorStops[0].color
              };"></span>${
                params[0].name
              }<span style="float:right;color:#ffffff;margin-left:20px;">${
                params[0].value
              }${
                params[0].data && params[0].data.unit ? params[0].data.unit : ""
              }</span></div></div>`;
              return dataStr;
            }
          },
        },
        dataZoom: [
          {
            type: "inside", //slider表示有滑动块的，inside表示内置的
            show: false,
            startValue: 0,
            endValue: 4,
            xAxisIndex: 0,
          },
        ],
        grid: {
          // top: this.topVal,
          right: flag ? this.gridData.right : "1",
          // left: "40",
          // bottom: "30",
          ...this.gridData,
          containLabel: true,
        },
        legend: [
          {
            data: this.type,
            orient: this.gridData.legendOrient,
            itemGap: 5,
            itemWidth: 14,
            itemHeight: 14,
            textStyle: {
              color: this.gridData.legendColor,
              fontSize: 14,
            },
            width: this.gridData.legendWidth,
            height: this.gridData.legendHeight,
            top: this.gridData.legendTop,
            left: this.gridData.legendLeft,
            right: this.gridData.legendRight,
            bottom: this.gridData.legendBottom,
            // icon: "circle",
          },
        ],
        xAxis: [
          {
            type: "category",
            axisLabel: {
              showMinLabel: true,
              color: this.gridData.XYColor,
              fontSize: this.gridData.fontSize,
              rotate: this.gridData.rotate,
              interval: 0, //使x轴文字显示全
            },
            data: this.yname,
            axisTick: {
              show: false,
            },
            splitLine: {
              //网格线
              lineStyle: {
                type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
                color: "rgba(190, 223, 249, 0.5)",
              },
              show: true, //隐藏或显示
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#E5F4FF",
              },
            },
          },
        ],
        yAxis: [
          {
            name: this.gridData.lname,
            nameTextStyle: { color: this.gridData.XYColor, fontSize: 14 },
            type: "value",
            position: 0,
            splitArea: {
              show: false,
            },
            axisLabel: {
              color: this.gridData.XYColor,
              fontSize: 12,
              formatter: function (value) {
                var texts = JSON.stringify(value);
                if (texts.length > 5) {
                  // 具体多少字就看自己了
                  texts = texts.substr(0, 5) + "...";
                }
                return texts;
              },
            },
            splitLine: {
              //分割线配置
              show: true,
              lineStyle: {
                type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
                color: "rgba(190, 223, 249, 0.5)",
              },
            },
          },
          {
            name: this.gridData.Rname,
            nameTextStyle: { color: this.gridData.XYColor, fontSize: 14 },
            type: "value",
            position: 1,
            splitArea: {
              show: false,
            },
            axisLabel: {
              color: this.gridData.XYColor,
              fontSize: 12,
              formatter: function (value) {
                var texts = JSON.stringify(value);
                if (texts.length > 3) {
                  // 具体多少字就看自己了
                  texts = texts.substr(0, 3) + "...";
                }
                return texts;
              },
            },
            splitLine: {
              //分割线配置
              show: true,
              lineStyle: {
                // color: "#21213C",
                color: "rgba(190, 223, 249, 0.5)",
              },
            },
          },
        ],
        series: seriesData,
      };
      this.Echarts.setOption(option);
      setTimeout(() => {
        this.Echarts.resize();
      }, 100);
    },
    initEch() {
      // 绘制左侧面
      const CubeLeft = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          const xAxisPoint = shape.xAxisPoint;
          const c0 = [shape.x, shape.y];
          const c1 = [shape.x - offsetX, shape.y - offsetY];
          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
          const c3 = [xAxisPoint[0], xAxisPoint[1]];
          ctx
            .moveTo(c0[0], c0[1])
            .lineTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .closePath();
        },
      });
      // 绘制右侧面
      const CubeRight = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          const xAxisPoint = shape.xAxisPoint;
          const c1 = [shape.x, shape.y];
          const c2 = [xAxisPoint[0], xAxisPoint[1]];
          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
          const c4 = [shape.x + offsetX, shape.y - offsetY];
          ctx
            .moveTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .lineTo(c4[0], c4[1])
            .closePath();
        },
      });
      // 绘制顶面
      const CubeTop = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          const c1 = [shape.x, shape.y];
          const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
          const c3 = [shape.x, shape.y - offsetX];
          const c4 = [shape.x - offsetX, shape.y - offsetY];
          ctx
            .moveTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .lineTo(c4[0], c4[1])
            .closePath();
        },
      });
      // 注册三个面图形
      echarts.graphic.registerShape("CubeLeft", CubeLeft);
      echarts.graphic.registerShape("CubeRight", CubeRight);
      echarts.graphic.registerShape("CubeTop", CubeTop);
      const offsetX = 8;
      const offsetY = 4;
      // let value = this.outRiverData;
      // let dataV = value.map((n) => ({ value: n, unit: "艘" }));

      let xData = this.xData;
      let seriesData = [
        // 柱体
        {
          name: "",
          type: "custom",
          stack: "Ad",
          renderItem: (params, api) => {
            const location = api.coord([api.value(0), api.value(1)]);
            return {
              type: "group",
              x: -10,
              children: [
                {
                  type: "CubeLeft",
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    xAxisPoint: api.coord([api.value(0), 0]),
                  },
                  style: {
                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: "rgba(2, 93, 196, 1)",
                      },
                      {
                        offset: 1,
                        color: "rgba(0, 155, 217, 1)",
                      },
                    ]),
                  },
                },
                {
                  type: "CubeRight",
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    xAxisPoint: api.coord([api.value(0), 0]),
                  },
                  style: {
                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: "rgba(2, 93, 196, 1)",
                      },
                      {
                        offset: 1,
                        color: "rgba(115, 246, 255, 1)",
                      },
                    ]),
                  },
                },
                {
                  type: "CubeTop",
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    xAxisPoint: api.coord([api.value(0), 0]),
                  },
                  style: {
                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: "rgba(28, 240, 255, 1)",
                      },
                      {
                        offset: 1,
                        color: "rgba(201, 251, 255, 1)",
                      },
                    ]),
                  },
                },
              ],
            };
          },
          data: dataV,
        },
      ];

      this.$refs.barLineZoom.gridData = {
        ...this.$refs.barLineZoom.gridData,
        lname: "单位：艘",
        left: 20,
        top: 35,
        // bottom: 10,
        // rotate: 30,
      };

      this.$refs.barLineZoom.yname = xData;
      this.$refs.barLineZoom.seriesData = seriesData;
      this.$refs.barLineZoom.drawEchart();
    },
    genLinearGradient(colors) {
      const color = {
        type: "linear",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: colors[0], // 0%处的颜色
          },
          {
            offset: 1,
            color: colors[1], // 100%处的颜色
          },
        ],
        global: false,
      };
      return color;
    },
  },
  beforeDestroy() {
    if (this.Echarts) {
      // 清除实例，释放资源
      this.Echarts.dispose();
      // 将实例设为null，避免潜在的内存泄漏
      this.Echarts = null;
    }
  },
};
</script>
